<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3-5 Bootstrap中的表单</title>

    <link rel="stylesheet" href="./bootstrap-3.3.7/dist/css/bootstrap.min.css">
    <script src="jquery/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>


</head>
<body>

<!--form-inline:排版效果水平排列  -->
<form class="form-inline">

    <!--    label和 input是一对组件-->
    <!--    has-success:改变label和输入框的状态-->
    <div class="form-group has-success">
        <!--        sr-only:label消失  control-label:表示可控制的label -->
        <label class="control-label" for="">这是一个输入框:</label>
        <!--   input-lg:让输入框变得更大 input-sm:让输入框变得更小      -->
        <input type="text" class="form-control" placeholder="这是一个输入框">
    </div>


    <div class="form-group has-warning">
        <label class="control-label" for="">这是一个输入框：</label>
        <select class="form-control" name="" id="">
            <option value="">北京</option>
            <option value="">北京</option>
            <option value="">北京</option>
            <option value="">北京</option>
            <option value="">北京</option>
        </select>
    </div>


    <div class="form-group has-error">
        <label class="control-label" for="">这是个输入框：</label>
        <textarea name="" class="form-control" cols="30" rows="10" placeholder="这是"></textarea>
    </div>

    <div>
        <!--        各种样式的按钮  active:是按下去的效果   btn-block：按钮全屏效果
        disabled="disabled":按钮是禁用状态
        -->
        <button class="btn btn-default btn-lg">这是一个按钮</button>
        <button class="btn btn-success btn-sm">这是一个按钮</button>
        <button class="btn btn-primary active">这是一个按钮</button>
        <button class="btn btn-info btn-block">这是一个按钮</button>
        <button class="btn btn-warning" disabled="disabled">这是一个按钮</button>
        <button class="btn btn-danger">这是一个按钮</button>
        <button class="btn btn-link">这是一个按钮</button>
        <a class="btn btn-danger" href="">这是a标签所写的按钮效果</a>
    </div>

</form>


</body>
</html>
